<template>
  <!-- 引入导航组件 -->
  <IndexNav />
  <!-- 下半部分开始 -->
  <div id="content_container">
    <!-- 分类导航 -->
    <div class="grad_c1">
      <div class="grad_nav">
        <ul class="feedTab clearfix">
          <li class="feedTab_item">
            <div class="feedTab_item__item_img">
              <img
                :src="require('@/assets/imgs/index/feed_nav01.png')"
                alt=""
              />
            </div>
            <div class="feedTab_item__item_title jd_red">
              <div class="title">为你精选</div>
              <div class="sub_title">猜你喜欢</div>
            </div>
          </li>
          <li class="feedTab_item">
            <div class="feedTab_item__item_img">
              <img
                :src="require('@/assets/imgs/index/feed_nav02.png')"
                alt=""
              />
            </div>
            <div class="feedTab_item__item_title">
              <div class="title">潮电好物</div>
              <div class="sub_title">3C数码</div>
            </div>
          </li>
          <li class="feedTab_item">
            <div class="feedTab_item__item_img">
              <img
                :src="require('@/assets/imgs/index/feed_nav03.png')"
                alt=""
              />
            </div>
            <div class="feedTab_item__item_title">
              <div class="title">居家优品</div>
              <div class="sub_title">家电家居</div>
            </div>
          </li>
          <li class="feedTab_item">
            <div class="feedTab_item__item_img">
              <img
                :src="require('@/assets/imgs/index/feed_nav04.png')"
                alt=""
              />
            </div>
            <div class="feedTab_item__item_title">
              <div class="title">百货生鲜</div>
              <div class="sub_title">超市甄选</div>
            </div>
          </li>
          <li class="feedTab_item">
            <div class="feedTab_item__item_img">
              <img
                :src="require('@/assets/imgs/index/feed_nav05.png')"
                alt=""
              />
            </div>
            <div class="feedTab_item__item_title">
              <div class="title">时尚达人</div>
              <div class="sub_title">美妆穿搭</div>
            </div>
          </li>
          <li class="feedTab_item">
            <div class="feedTab_item__item_img">
              <img
                :src="require('@/assets/imgs/index/feed_nav06.png')"
                alt=""
              />
            </div>
            <div class="feedTab_item__item_title">
              <div class="title">进货好物</div>
              <div class="sub_title">京东国际</div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <!-- 产品列表 -->
    <div class="grad_c1">
      <div id="goods_container" class="goods_list_panel">
        <div class="goods_item" v-for="(item, index) in 24" :key="index">
          <a href="#">
            <div class="goods_img">
              <img :src="require('@/assets/imgs/goods/001.avif')" alt="" />
            </div>
            <div class="goods_info">
              <div class="title">
                华为路由BE7【Mate 70上网好搭档】Wi-Fi 7 6500兆级 超薄膜天线
                双2.5GE网口 千兆路由器 家用路由器
              </div>
              <div class="tags"></div>
              <div class="price">￥599</div>
            </div>
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import IndexNav from "@/components/layout/IndexNav.vue";
// 后续可以添加商品数据
// const goodsList = ref([])
</script>

<style lang="scss" scoped>
/* 下半部分开始 */
/* 分类导航 */
#content_container .grad_nav {
  width: 1484px;
  margin: 0 auto;
  background-color: #ffffff;
  /* height: 800px; */
  padding: 18px 0;
}

.grad_nav li {
  float: left;
}

.grad_nav li.feedTab_item {
  display: flex;
  cursor: pointer;
  width: 193px;
  height: 48px;
}

.feedTab_item__item_img img {
  width: 48px;
  height: 48px;
}

.feedTab_item__item_title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 6px;
}

.grad_nav .feedTab_item {
  margin-left: 60px;
}

/* 加冒号设置伪元素，其左右是只对当前第一个元素生效 */
.grad_nav .feedTab_item:first-child {
  margin-left: 16px;
}

/* 加冒号设置伪元素,其左右是对除了最后一个元素以外,其他元素生效的样式 */
.grad_nav .feedTab_item:not(:last-of-type) {
  border-right: 1px solid rgba(0, 0, 0, 0.06);
}

.feedTab_item__item_title .title {
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
  margin-bottom: 2px;
}

.feedTab_item__item_title .sub_title {
  font-size: 14px;
  line-height: 20px;
}

.jd_red {
  color: #ff0f23;
}

/* 产品列表 */
#content_container .goods_list_panel {
  position: relative;
  display: grid;
  /* 这里参考B站使用grid布局 */
  /* 每个列表项宽度最大230像素, gap间距是20像素 */
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 20px;
  width: 1484px;
  margin: 0 auto;
  background-color: #ffffff;
}

.goods_item {
  width: 230px;
  height: 360px;
}

.goods_item:hover {
  border: 1px solid #ff0f23;
  border-radius: 8px;
  box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.2);
}

.goods_item:hover img {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.goods_item img {
  width: 230px;
  height: 240px;
  object-fit: cover;
}

.goods_info {
  width: 230px;
  height: 120px;
}

.goods_info .title {
  height: 48px;
  font-size: 16px;
  font-weight: 500;
  text-align: left;
  color: #1a1a1a;
  transition: color 0.2s ease;
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.goods_info .tags {
  height: 20px;
}

.goods_info .price {
  display: inline-block;
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  height: 20px;
  color: #ff0f23;
}
</style>
